﻿<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="utf8">
	<title>591客资</title>
	<style type="text/css">

		.contir{
			width:100%;
			height: 100%;
			overflow:auto;
		}

		.fl{

			float:left;
		}

		.fr{
			float: rigth;
		}
		.clearfix:after{
			content:'';
			display: block;
			clear: both;
		}
		.table{

			
		}
		.table-fixed{
			width:100%;
			background-color:rgb(102,203,234);
			font-weight: bold;
			font-size:0.3rem;
			text-align: center;
			height: 0.5rem;
			line-height: 0.5rem;


		}
		.table-fixed div{

			/*width:calc(100% / 4);*/
			box-sizing: border-box;
			border-right: 2px solid rgb(255,255,255);
		}
		.table-content{
			width:100%;
		}
		.table-row{
			height: 0.8rem;
			line-height: 0.8rem;
			border-bottom:1px solid #e8e8e8;
		}
		.table-content .table-row div{

			
			text-align: center;
			font-size:0.3rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			
		}

		.seacher{

			/*height: 1rem;*/
			font-size:0.2rem;
			margin:1rem 0;
		}

		.date-item{

			
			margin-right: 0.5rem;
			line-height: 1rem;
		}

		.seacherBtn{
			width:1.3rem;
			height: 0.5rem;
		}

		.dateInput{
			width: 5rem;
			height: 0.5rem;
		}

		.prevTime{
			font-size:0.3rem;
		}


	</style>
	<link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
</head>
<body>
	<div id="app" class="contir">

		<div class="seacher clearfix">
			<div class="date-item fl" >
				<span>日期范围:</span>
				<input type="text" class="dateInput"  id="test1">
			</div>

			

			<div class="date-item fl ">
				<span><button class="seacherBtn" id="import">导出</button></span>
			</div>

			<div class="date-item fl prevTime" id="importPre">
				<div>上一次导出时间: {{prevTime}}</div>
			</div>

			
		</div>
		
		<div class="table">
			
			<div class="table-fixed clearfix">
				<div class="fl" v-for="item of tablefixed"  v-bind:style="{width: widthData}">{{item.title}}</div>
			</div>

			<div class="table-content">
				<div class="table-row clearfix" v-for="item of tableData">

					<div class="fl" v-for="(itemFix,index) of tablefixed"  v-bind:style="{width: widthData}">

						<span>
							{{item[itemFix['fixed']]}}
						</span>
						
					</div>

				</div>
			</div>

		</div>

	</div>
</body>

<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript" src="../gaiBiaoQian/js/jquery.min.js"></script>
<script type="text/javascript" src="../layui/layui.all.js"></script>
<script type="text/javascript" src="../gaiBiaoQian/js/reset.js"></script>

<script type="text/javascript">

		 Date.prototype.format = function (format) {
	           var args = {
	               "M+": this.getMonth() + 1,
	               "d+": this.getDate(),
	               "h+": this.getHours(),
	               "m+": this.getMinutes(),
	               "s+": this.getSeconds(),
	               "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
	               "S": this.getMilliseconds()
	           };
	           if (/(y+)/.test(format))
	               format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	           for (var i in args) {
	               var n = args[i];
	               if (new RegExp("(" + i + ")").test(format))
	                   format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
	           }
	           return format;
	     };
			
	    //创建表格
		var app = new Vue({

			el:'#app',
			data:{
				tableData:[],
				tablefixed:[{title:'客户姓名',fixed:'title'},{title:'报名时间',fixed:'start_date'},{title:'电话',fixed:'link_url'},{title:'省份',fixed:'prv'},{title:'城市',fixed:'city'}],
				widthData:'',
				prevTime:localStorage.getItem("importPrevTime") ==''?'00-00-00 00：00：00':localStorage.getItem("importPrevTime")
			},
			created:function(){

				var self = this

				$.post('../mingxi.php',{type:46},function(data,success){

			
					if(success == 'success'){

						var data = JSON.parse(data).data

						self.$data.tableData = data

					}

				})

				this.$data.widthData = 'calc( 100% / ' + this.$data.tablefixed.length + ')'

			},
			methods:{

				strServe:function(val,index){

					return val.split('_')[index]
				}
			}

		})


		//按日期搜索
		layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#test1' //指定元素
		    ,min:'2020-10-20 00:00:00'
		    ,type: 'datetime'
  			,range: '~' //或 range: '~' 来自定义分割字符
		  	,done: function(value, date, endDate){

			    $.post('../mingxi.php',{type:46,starTime:value.split('~')[0],endTime:value.split('~')[1]},function(data,success){

			
					if(success == 'success'){

	
						var data = JSON.parse(data).data

						app.$data.tableData = data

					}

				})



			  }
		  });
		});



		$('#import').on('click',function(){

			var dataTime = $('#test1').val()

			var fileName = new Date().format("yyyyMMdd") +'hb.xlsx'

			if(dataTime == ''){

				dataTime = "2020/10/20 00:00:00 ~ 2050/10/01/ 00:00：00"

			}

			localStorage.setItem("importPrevTime",new Date().format("yyyy/MM/dd hh:mm:ss"));
			// localStorage.setItem('importPrevTime','2020/10/24  13:07:10')
			app.$data.prevTime = localStorage.getItem('importPrevTime')

			$.get('importExcel.php',{starTime:dataTime.split('~')[0],endTime:dataTime.split('~')[1],fileName:fileName},function(data,success){

				if(success === 'success'){

					window.location.href='../excel/' + fileName;

				}
			})

		})


		$('#importPre').on('click',function(){
			

			var starTime = localStorage.getItem('importPrevTime')

			var endTime = new Date().format("yyyy/MM/dd hh:mm:ss")

			var fileName = new Date().format("yyyyMMdd") +'hb.xlsx'

			$.get('importExcel.php',{starTime:starTime,endTime:endTime,fileName:fileName},function(data,success){

				if(success === 'success'){

					window.location.href='../excel/' + fileName;

				}
			})

			localStorage.setItem("importPrevTime",endTime);
			// localStorage.setItem('importPrevTime','2020/10/24  13:07:10')
			app.$data.prevTime = localStorage.getItem('importPrevTime')



		})





</script>
</html>